<template>
  <div :class="['confirm-page']">
    <div class="container">
      <photo-preview :src="(result[$route.query.id] || {}).src" :class="['photo-preview', {loading: (result[currentId] || {}).loading}]" :style="{width: width + 'px', height: height + 'px'}"></photo-preview>
      <div class="page-btn left-btn scale-on-active"></div>
      <div class="page-btn right-btn scale-on-active"></div>
      <div class="hair-list">
        <swiper :options="swiperOption">
          <swiper-slide :class="['hair-item', {active: hair.id === currentId}]" v-for="hair in totalHairList" :key="hair.id">
            <img @load="loadedCnt++" :src="hair.image" alt="" class="hair-image scale-on-active" @click="changeHair(hair.id)"/>
          </swiper-slide>
        </swiper>
      </div>
      <img src="@/assets/images/confirm-submit-btn.png" alt="" class="submit-btn scale-on-active" @click="$router.push({name: 'result', query: {id: $route.query.id}})"/>

      <!--用来预加载图片-->
      <img v-if="loadedCnt >= 9" @load="loadedCnt++" class="hidden-img" src="@/assets/images/result-bg.png" alt=""/>
      <img v-if="loadedCnt >= 9" @load="loadedCnt++" class="hidden-img" src="@/assets/images/result-retry-btn.png" alt=""/>
      <img v-if="loadedCnt >= 9" @load="loadedCnt++" class="hidden-img" src="@/assets/images/result-share-btn.png" alt=""/>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import {hairList} from '@/config/index'
export default {
  name: 'confirmPage',
  data: () => ({
    hairList,
    currentPage: 0,
    currentId: '',
    pageSize: 3,
    loadedCnt: 0,
    swiperOption: {
      slidesPerView: 3,
      slidesPerGroup: 3,
      spaceBetween: 30,
      navigation: {
        nextEl: '.right-btn',
        prevEl: '.left-btn'
      }
    },
    width: 0,
    height: 0
  }),
  created () {
    window._hmt.push(['_trackEvent', '编辑页', 'view', '进入编辑页'])
    // 处理图片大小，充当calc效果
    let h = window.innerHeight - window.innerWidth * 0.54
    let w = h * 0.54
    if (w >= window.innerWidth * 0.84) {
      this.width = window.innerWidth * 0.84
      this.height = this.width / 0.54
    } else {
      this.width = w
      this.height = h
    }
    this.currentId = this.$route.query.id
  },
  computed: {
    ...mapGetters([
      'result', 'gender', 'isResultLoading'
    ]),
    genderList () {
      return this.gender === 'male' ? ['male', 'female'] : ['female', 'male']
    },
    totalHairList () {
      // 所有的发型示例图
      let result = []
      this.genderList.forEach(gender => {
        hairList[gender].forEach(hair => {
          result.push(hair)
        })
      })
      return result
    }
  },
  methods: {
    ...mapActions([
      'getMergedFace'
    ]),
    async changeHair (id) {
      this.currentId = id
      // 先闭包下loading，方便后面判断
      let loading = (this.result[id] || {}).loading
      // 如果示例图没有对应的src，或者示例图对应的合成图还在loading，则触发请求
      if (!(this.result[id] || {}).src && loading !== true) {
        await this.getMergedFace(id)
      }
      if (id === this.currentId && this.$route.name === 'confirm') {
        this.$router.replace({
          name: 'confirm',
          query: {
            id
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .confirm-page {
    position: relative;
    background: {
      image: url(~@/assets/images/confirm-bg.png);
      size: cover;
      position: center;
    }
    &.loading {
      .hair-list {
        pointer-events: none;
      }
    }
    .photo-preview {
      position: absolute;
      width: 461px;
      height: 840px;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      &.loading {
        &:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 2;
          background-color: rgba(0, 0, 0, 0.2);
        }
        &:after {
          content: '';
          position: absolute;
          background: {
            image: url(~@/assets/images/loading-icon.png);
            size: 100% 100%;
            position: center;
          };
          width: 100px;
          height: 100px;
          top: 50%;
          left: 50%;
          margin-left: -50px;
          margin-top: -50px;
          animation: rotate 1s infinite linear;
        }
      }
    }
    .back-btn {
      position: absolute;
      width: 139px;
      height: 87px;
      top: 26px;
      left: 40px;
    }
    .container {
      position: absolute;
      top: 46px;
      bottom: 30px;
      left: 0;
      right: 0;
    }
    .page-btn {
      position: absolute;
      bottom: 143px;
      width: 86px;
      height: 143px;
      background: {
        size: 31px 38px;
        position: center;
        repeat: no-repeat;
      }
    }
    .left-btn {
      left: 0;
      background: {
        image: url(~@/assets/images/confirm-left-btn.png);
      }
    }
    .right-btn {
      right: 0;
      background: {
        image: url(~@/assets/images/confirm-right-btn.png);
      }
    }

    .hair-list {
      position: absolute;
      width: 577px;
      height: 152px;
      bottom: 103px;
      left: 56px;
      padding: 30px;
      overflow: hidden;
      .swiper-container {
        /*width: 1000%;*/
        height: 100%;
        .swiper-wrapper {
          width: 1000%;
          height: 100%;
        }
      }
      .hair-item {
        text-decoration: none;
        list-style: none;
        width: 164px;
        height: 155px;
        display: inline-block;
        float: left;
        position: relative;
        .hair-image {
          width: 100%;
          height: 100%;
        }
        &.active {
          pointer-events: none;
        }
        &.active:after {
          content: '';
          position: absolute;
          background: {
            image: url(~@/assets/images/confirm-choose-border.png);
            size: 100% 100%;
            position: center;
          };
          pointer-events: none;
          width: 183px;
          height: 179px;
          top: -13px;
          left: -9px;
        }
      }
    }
    .submit-btn {
      position: absolute;
      width: 278px;
      height: 104px;
      bottom: 0;
      left: 222px;
    }
  }
</style>
